<template>
  <el-drawer
      title="添加单词"
      :before-close="handleClose"
      :visible.sync="dialog"
      direction="ltr"
      custom-class="demo-drawer"
      ref="drawer"
  >
    <div class="demo-drawer__content">
      <el-form :model="form">
        <el-form-item label="单词" :label-width="formLabelWidth">
          <el-input v-model="form.word" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="翻译" :label-width="formLabelWidth">
          <el-input v-model="form.translate" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input v-model="form.remake" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label=分组 :label-width="formLabelWidth">
        <el-select v-model="form.grouo" clearable filterable placeholder="请选择分组">
          <el-option
              v-for="item in grouos"
              :key="item"
              :label="item"
              :value="item">
          </el-option>
        </el-select>
        </el-form-item>
      </el-form>
      <div class="demo-drawer__footer">
        <el-button @click="cancelForm">取 消</el-button>
        <el-button type="primary" @click="$refs.drawer.closeDrawer()" :loading="loading">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
      </div>
    </div>
  </el-drawer>
</template>

<script>
import axios from "axios";

export default {
  props:{
  dialog:Boolean,grouos:Array
},
  model:{
    prop:'dialog',
    event:"pop"
  },
  data(){
    return{

      formLabelWidth: '80px',
      timer: null,
      name: "Input",
      table: false,
      loading: false,
      form:{
      },

    }
  }
  ,
methods: {
  handleClose(done) {
    if (this.loading) {
      return;
    }
    this.$confirm('确定要提交表单吗？')
        .then(_ => {
          this.form.userid=window.sessionStorage.getItem("ID")
          this.loading = true;
          axios({
            url:"/note/put",
            method:"post",
            data:this.form
          }).then(data=>{
            if(data.data.code===1000){
              this.$message({
                message: data.data.msg,
                type: 'success'
              });
              this.form=data.data.data
              this.$emit("append",this.form)
              this.loading=false
            }else {
              this.loading=false
              this.$message.error(data.data.msg);
            }
          })

        })
        .catch(_ => {});
  },
  cancelForm() {
    this.loading = false;
    this.$emit("pop",false)
    clearTimeout(this.timer);
  }
}
}
</script>

<style scoped>

</style>